
import Taro, {Component} from '@tarojs/taro'
import {View, Text, Image, RichText} from '@tarojs/components'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {pageSize} from '../../utils/common'

import './problem.less'
import icon_07 from '../../assets/img/icon_07.png'


interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Problem extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    items: [],
    totalCount: 0,
    pageIndex: 1,
    pageSize,
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '常见问题'})
    this.getAllHeadLines()
  }

  getAllHeadLines() {
    let { homeStore } = this.props.stores
    let { pageIndex, items } = this.state
    homeStore.getAllHeadLines({
      formCategoryName: '常见问题',
      pageIndex,
      pageSize,
      callback: res => {
        if(pageIndex === 1) {
          this.setState({items: res.items, totalCount: res.totalCount
          })
        }else {
          let temp = items.push(...res.items || [])
          this.setState({ items: temp,  totalCount: res.totalCount})
        }
      }
    })
  }

  onReachBottom(): void {
    let { pageIndex, pageSize, totalCount } = this.state
    // 判断是否还有下一页
    if(pageIndex * pageSize < totalCount ) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getAllHeadLines()
      })
    }
  }

  render() {
    let { items } = this.state
    return (
      <View className='problem content-30'>
        {
          items.map(item => {
            return(
              <View className='problem-item' key={item.id}>
                <View className='problem-item__top'>
                  <Image className='problem-item__icon' src={icon_07} />
                  <Text className='problem-item__title'>{item.title}</Text>
                </View>
                <View className='problem-item__desc rich-text'>
                  <RichText nodes={item.content} />
                </View>
              </View>
            )
          })
        }
      </View>
    )
  }
}

export default Problem
